<template>
    <div class="boxMain">
        <div class="top" style="display: flex;justify-content: space-between;align-items: center;
                            margin-top: 15px;">
            <img @click="onImg" src="../assets/zzts.png" alt="" style="width: 11px;height: 18px;margin-left: 15px;">
            <span>设置</span>
            <span></span>
        </div>
        <div style="background-color: darkgray ;height: 10px;opacity: .1;margin-top: 15px;"></div>

        <div class="mains" style="height: 50px;display: flex;justify-content: space-between;align-items: center;">
            <div style="margin-left: 15px;">账号ID</div> 
            <span></span>
            <span style="margin-right: 15px;color: #bdc0c5;font-size: 13px;">2{{store.dataList? store.dataList.userId:"" }}</span>
        </div>
        <div style="background-color: darkgray ;height: 10px;opacity: .1;"></div>
        <div class="mains" style="height: 50px;display: flex;justify-content: space-between;align-items: center;">
            <div style="margin-left: 15px;">手机号码</div> 
            <span></span>
            <span style="margin-right: 15px;color: #bdc0c5;font-size: 13px;">{{store.dataList?store.dataList.nickName:"" }}</span>
        </div>

        <button style="width: 100%;height: 49px;color: #ff5f16;line-height: 49px;
        text-align: center;border: 0;position: fixed;bottom: 0;left: 0;z-index: 100;
        background-color: white;" @click="canLogin">退出登录</button>
        <van-dialog v-model:show="show" title="确定是否退出登录" show-cancel-button @confirm="onConfirm">
  
</van-dialog>
    </div>
</template>



<script setup>
import { onMounted ,ref} from 'vue';
import listStore from "../store/index"
import router from "../router/index"


const store  = listStore()
const show = ref(false)

onMounted (()=>{
    store.bottom = false
})
// 点击返回小箭头
const onImg = (()=>{
    // 不清空用户数据，跳转路由
    router.push("/center")
})

// 点击退出登录
const canLogin = (()=>{
    show.value = true
})

// 确定退出
const onConfirm = (()=>{
    // 将用户信息清空
    store.dataList = null
    // 路由跳转
    router.push("/center")

})

</script>


<style scoped>



</style>